<template>
  <div class="comment-box">
    <div class="top">
      <div class="avatar">
        <img :src="op.user.avatar" alt="" />
        <div>
          <p>{{ op.user.nickname }}</p>
          <div class="rank" v-if="haveTitle">
            <img :src="imgUrl" alt="" />
            <span>{{ rankName }}</span>
          </div>
        </div>
      </div>
      <div :class="isLike ? 'like' : ''" @click="like">
        <svg
          t="1636038599986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5368"
          width="22"
          height="22"
        >
          <path
            d="M772.2 380.3H653.6s17.6-59 26.5-158.6c4.5-50.5-30.9-98.5-82.8-104-3.2-0.5-6.3-0.7-9.5-0.7-42.3 0-79.2 29.2-86.9 70.5 0 0-12.6 64.7-19.1 88-10.8 38.3-48.6 80.7-76 94.3-20.7 10.3-97.5 10.4-102.2 10.4H199.1c-28.8 0-52.1 23.5-52.1 52.7v421.7c0 29.1 23.3 52.7 52.1 52.7h481.2c77.4 0 143.2-57.2 154.7-134.6l40.3-271.4c9.5-63.8-39.3-121-103.1-121zM309.1 852.8H201V444h108.1v408.8z"
            fill="#1afa29"
            p-id="5369"
          ></path>
        </svg>
        <span v-if="isLike">{{ op.likeCount + 1 }}</span>
      </div>
    </div>
    <div class="bottom">
      <p class="content">{{ op.content }}</p>
      <div class="bot-right">
        <p>{{ date }} {{hh}}:{{mm}}</p>
        <p class="reply">回复</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommentBox",
  props: {
    op: {
      type: Object,
    },
  },
  data() {
    return {
      imgUrl: "",
      rankName: "",
      haveTitle: false,
      isLike: false,
      date: "",
      hh: "",
      mm: "",
    };
  },
  mounted() {
    if (this.op.user.title) {
      this.imgUrl = this.op.user.title.icon;
      this.rankName = this.op.user.title.name;
      this.haveTitle = true;
    }
    this.getTime(this.op.createTime);
  },
  methods: {
    like() {
      this.isLike = !this.isLike;
    },
    getTime(time) {
      // 当前时间
      let curTime = new Date();
      // 评论创建的时间
      let createtime = new Date(time);
      // 获取创建时间的月、日、小时、分钟
      let createmon = createtime.getMonth() + 1;
      let createdate = createtime.getDate();
      let h = createtime.getHours();
      let m = createtime.getMinutes();
      this.hh = h < 10 ? "0" + h : h;
      this.mm = m < 10 ? "0" + m : m;

      if (curTime.getMonth() + 1 == createmon) {
        if (curTime.getDate() == createdate) {
          this.date = "今天";
        } else if (curTime.getDate() - createdate == 1) {
          this.date = "昨天";
        } else if (curTime.getDate() - createdate == 2) {
          this.date = "前天";
        } else if (curTime.getDate() - createdate > 2) {
          createmon = createmon < 10 ? "0" + createmon : createmon;
          createdate = createdate < 10 ? "0" + createdate : createdate;
          this.date = `${createmon}-${createdate}`;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.comment-box {
  border-bottom: 1px solid rgb(223, 221, 221);
  padding: 8px 15px;
  .top {
    display: flex;
    justify-content: space-between;
    .avatar {
      display: flex;
      justify-content: flex-start;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      p {
        font-size: 14px;
        color: rgb(66, 148, 101);
      }
      .rank {
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
          margin-right: 5px;
        }
        span {
          font-size: 12px;
          color: #999;
          vertical-align: middle;
        }
      }
    }
    svg {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      path {
        fill: rgb(121, 120, 120);
      }
    }
    .like {
      svg {
        path {
          fill: rgb(66, 148, 101);
        }
      }
      span {
        color: rgb(66, 148, 101);
        font-size: 16px;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .content {
      font-size: 14px;
    }
    .bot-right {
      flex-shrink: 0;
      p {
        display: inline-block;
        font-size: 12px;
        color: #999;
        &.reply {
          color: rgb(66, 148, 101);
          margin-left: 10px;
        }
      }
    }
  }
}
</style>